<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>酒店后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- layui -->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}"></script>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet"
          th:href="@{/adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css}">
    <!-- Font Awesome -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/font-awesome/css/font-awesome.min.css}">
    <!-- Ionicons -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/Ionicons/css/ionicons.min.css}">
    <!-- Theme style -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/AdminLTE.min.css}">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" th:href="@{/adminlte/dist/css/skins/_all-skins.min.css}">
    <!-- Morris chart -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/morris.js/morris.css}">
    <!-- jvectormap -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/jvectormap/jquery-jvectormap.css}">
    <!-- Date Picker -->
    <link rel="stylesheet"
          th:href="@{/adminlte/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css}">
    <!-- Daterange picker -->
    <link rel="stylesheet" th:href="@{/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css}">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" th:href="@{/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}">

    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-blue sidebar-mini" onload="startClock()" onunload="stopClock()">
<div class="wrapper">

    <div th:replace="/common/backCommon::header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="/common/backCommon::menu"></div>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                用户数据
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li><a href="/user/getAll">用户数据</a></li>
                <li class="active">填写用户信息</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!--   这里写具体功能部分   -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">填写用户信息</h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->
                <form role="form" action="/user/save" method="post" th:object="${user}">
                    <div class="box-body">
                        <input type="hidden" name="userId" th:field="*{userId}">
                        <div class="form-group">
                            <label for="usernameInput">用户名</label>
                            <input type="text" name="username" class="form-control" id="usernameInput" th:field="*{username}">
                        </div>
                        <div class="form-group">
                            <label for="passwordInput">密码</label>
                            <input type="text" name="password" class="form-control" id="passwordInput" th:field="*{password}">
                        </div>
                        <div class="form-group">
                            <label for="telInput">联系方式</label>
                            <input type="text" name="userTel" class="form-control" id="telInput" th:field="*{userTel}">
                            <p></p>
                        </div>
                        <div class="form-group">
                            <label for="identifyInput">身份证号</label>
                            <input type="text" name="userIdentify" class="form-control" id="identifyInput" th:field="*{userIdentify}">
                        </div>
                        <div class="form-group">
                            <label for="birthdayInput">生日</label>
                            <input type="date" name="stringUserBirthday" class="form-control" id="birthdayInput" th:value="${#dates.format(user.userBirthday, 'yyyy-MM-dd')}">
                        </div>
                        <div class="form-group">
                            <label>性别</label>
                            <div>
                            <!--<label>-->
                                <!--<input type="radio" name="userSex" id="sexMan" value="1" th:field="*{userSex}">男-->
                            <!--</label>-->
                            <!--<label>-->
                                <!--<input type="radio" name="userSex" id="sexWoman" value="2" th:field="*{userSex}">女-->
                            <!--</label>-->
                                <select  id="userSex" type="text" name="userSex" class="form-control">
                                    <option value="1" selected th:if="${user.userSex}==1">男</option>
                                    <option value="1"  th:if="${user.userSex}==0">男</option>
                                    <option value="0"  th:if="${user.userSex}==1">女</option>
                                    <option value="0" selected th:if="${user.userSex}==0">女</option>
                                    <option value="1" selected th:if="${user.userSex}==null">男</option>
                                    <option value="0" th:if="${user.userSex}==null">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="emailInput">邮箱</label>
                            <input type="email" class="form-control" id="emailInput" th:field="*{userEmail}">
                            <p></p>
                        </div>
                        <div class="form-group">
                            <label>角色</label>
                            <select class="form-control" name="roleId">
                                <option th:each="role: ${roleList}" th:value="${role.roleId}" th:field="*{roleId}" th:text="${role.roleName}"></option>
                            </select>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <a href="#" onclick="javascript :history.back(-1);"><input type="button" class="btn btn-warning" value="取消"></a>
                    </div>
                </form>
            </div>

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:replace="/common/backCommon::footer"></div>


</div>
<!-- ./wrapper -->
<!-- jQuery 3 -->
<script th:src="@{/adminlte/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- jQuery UI 1.11.4 -->
<script th:src="@{/adminlte/bower_components/jquery-ui/jquery-ui.min.js}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- Morris.js charts -->
<script th:src="@{/adminlte/bower_components/raphael/raphael.min.js}"></script>
<script th:src="@{/adminlte/bower_components/morris.js/morris.min.js}"></script>
<!-- Sparkline -->
<script th:src="@{/adminlte/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js}"></script>
<!-- jvectormap -->
<script th:src="@{/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/adminlte/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
<!-- jQuery Knob Chart -->
<script th:src="@{/adminlte/bower_components/jquery-knob/dist/jquery.knob.min.js}"></script>
<!-- daterangepicker -->
<script th:src="@{/adminlte/bower_components/moment/min/moment.min.js}"></script>
<script th:src="@{/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js}"></script>
<!-- datepicker -->
<script th:src="@{/adminlte/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js}"></script>
<!-- Bootstrap WYSIHTML5 -->
<script th:src="@{/adminlte/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
<!-- Slimscroll -->
<script th:src="@{/adminlte/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/adminlte/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/adminlte/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script th:src="@{/adminlte/dist/js/pages/dashboard.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/adminlte/dist/js/demo.js}"></script>
<!-- DataTables -->
<script th:src="@{/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<script>
    $(function () {
        $('#example1').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });


            var userTel_reg=/^1(3|4|5|7|8|9)[0-9]\d{8}$/;
            var userEmail_reg=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            $("input").blur(function() {
                var ele = $(this);
                var getValue = ele.val();//获取创建用户时输入的文本信息
                if ($(this).is("#telInput")) {
                    if(userTel_reg.test(getValue)){
                        ele.attr("style", "color:black");
                        ele.next().empty();
                        $.ajax({
                            async: false,
                            url: "/user/checkRegister",
                            type: "post",
                            data: {"tel": getValue},
                            dataType: "json",
                            success: function (data) {
                                if (data === false) {
                                    ele.attr("style", "color:red;border:1px solid red");
                                    ele.next().attr("style", "color:red").html("&nbsp;&nbsp;此电话已被注册！（误点无操作请忽略！）");
                                } else {
                                    ele.attr("style", "color:green;border:1px solid green");
                                    ele.next().attr("style", "color:green;").html("&nbsp;&nbsp;此电话号可以注册！");
                                }
                            },
                            error: function () {
                            }
                        });
                    }else {
                        ele.attr("style", "color:red");
                        ele.next().attr("style", "color:red").html("&nbsp;&nbsp;手机号不合法！请重新输入！");
                    }
                } else if ($(this).is("#emailInput")) {
                    if(userEmail_reg.test(getValue)){
                        ele.attr("style", "color:black");
                        ele.next().empty();
                        $.ajax({
                            async: false,
                            url: "/user/checkRegister1",
                            type: "post",
                            data: {"email": getValue},
                            dataType: "json",
                            success: function (data1) {
                                if (data1 === false) {
                                    ele.attr("style", "color:red;border:1px solid red");
                                    ele.next().attr("style", "color:red").html("&nbsp;&nbsp;此邮箱已被注册！（误点无操作请忽略！）");
                                } else {
                                    ele.attr("style", "color:green;border:1px solid green");
                                    ele.next().attr("style", "color:green;").html("&nbsp;&nbsp;此邮箱可以注册！");
                                }
                            },
                            error: function () {
                            }
                        });
                    }else {
                        ele.attr("style", "color:red");
                        ele.next().attr("style", "color:red").html("&nbsp;&nbsp;邮箱不合法！请重新输入！");
                    }
                }
            });

            var userIdentify_reg=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            $("#identifyInput").blur(function(){
                var ele=$(this);
                var userId=$(this).val();
                var Id=$("#identifyInput").val();
                if(userIdentify_reg.test(Id)){
                    ele.attr("style", "color:black");
                    ele.next().empty();
                }else {
                    ele.attr("style", "color:red");
                    ele.next().attr("style", "color:red").html("&nbsp;&nbsp;身份证不合法！请重新输入！");
                }

                if($(this).css("color")!="rgb(255, 0, 0)"){
                    var userBirthday=userId.substr(6,4)+"-"+userId.substr(10,2)+"-"+userId.substr(12,2);
                    $("#birthdayInput").val(userBirthday);
                    var userSex=userId.substr(16,1)%2;
                    $("#userSex").val(userSex);
                }
            });

    })
</script>
<script th:src="@{/js/timer.js}"></script>
<script th:src="@{/js/menu-click.js}"></script>
</body>
</html>
